<template>
  <div>
    <!-- 全屏 -->
    <el-tooltip v-if="!props.content" effect="dark" :content="fullscreenTips" placement="bottom">
      <SvgIcon :name="fullscreenSvgName" @click="handleFullscreenClick" />
    </el-tooltip>
    <!-- 内容区 -->
    <el-dropdown v-else :disabled="isFullscreen">
      <SvgIcon :name="contentLargeSvgName" />
      <template #dropdown>
        <el-dropdown-menu>
          <!-- 内容区放大 -->
          <el-dropdown-item @click="handleContentLargeClick">{{ contentLargeTips }}</el-dropdown-item>
          <!-- 内容区全屏 -->
          <el-dropdown-item @click="handleContentFullClick">{{ $t('内容区域全屏') }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import screenfull from 'screenfull'
import { $t } from '@/languages/index'
const props = defineProps({
  element: {
    type: String,
    default: 'html'
  },
  openTips: {
    type: String,
    default: 'full screen'
  },
  exitTips: {
    type: String,
    default: 'Exit full screen'
  },
  content: {
    type: Boolean,
    default: false
  }
})
const openTipsTranslated = computed(() => $t('退出全屏'))
const exitTipsTranslated = computed(() => $t('全屏'))
//#region 全屏
const isFullscreen = ref(false)
const fullscreenTips = computed(() => {
  return isFullscreen.value ? openTipsTranslated.value : exitTipsTranslated.value
})
const fullscreenSvgName = computed(() => {
  return isFullscreen.value ? 'fullscreen-exit' : 'fullscreen'
})
const handleFullscreenClick = () => {
  const dom = document.querySelector(props.element) || undefined
  screenfull.isEnabled ? screenfull.toggle(dom) : ElMessage.warning($t('您的浏览器不工作'))
}
const handleFullscreenChange = () => {
  isFullscreen.value = screenfull.isFullscreen
  // 退出全屏时清除所有的 class
  isFullscreen.value || (document.body.className = '')
}
watchEffect(onCleanup => {
  // 挂载组件时自动执行
  screenfull.isEnabled && screenfull.on('change', handleFullscreenChange)
  // 卸载组件时自动执行
  onCleanup(() => {
    screenfull.isEnabled && screenfull.off('change', handleFullscreenChange)
  })
})
//#endregion

//#region 内容区
const isContentLarge = ref(false)
const contentLargeTips = computed(() => {
  return isContentLarge.value ? $t('内容区域恢复') : $t('内容区域放大')
})
const contentLargeSvgName = computed(() => {
  return isContentLarge.value ? 'fullscreen-exit' : 'fullscreen'
})
const handleContentLargeClick = () => {
  isContentLarge.value = !isContentLarge.value
  // 内容区放大时，将不需要的组件隐藏
  document.body.className = isContentLarge.value ? 'content-large' : ''
}
const handleContentFullClick = () => {
  // 取消内容区放大
  isContentLarge.value && handleContentLargeClick()
  // 内容区全屏时，将不需要的组件隐藏
  document.body.className = 'content-full'
  // 开启全屏
  handleFullscreenClick()
}
//#endregion
</script>

<style lang="scss" scoped>
.svg-icon {
  font-size: 20px;
  &:focus {
    outline: none;
  }
}
</style>
